<template>
  <div>
    <el-tabs v-model="comName" type="card" @tab-click="handleClick">
      <el-tab-pane label="积分商品" name="ProductList"></el-tab-pane>
      <el-tab-pane label="积分优惠券" name="CouponList"></el-tab-pane>
    </el-tabs>
    <component :is="comName"></component>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import CouponList from "./couponList/CouponList.vue";
import ProductList from "./productList/ProductList.vue";

@Component({
  components: {
    CouponList,
    ProductList,
  },
})
export default class IntegralPro extends Vue {
  /** 当前显示组件 */
  comName = "ProductList";

  /** 切换标签显示组件 */
  handleClick(tab) {
    this.comName = tab.name;
  }

  mounted() {
    if (this.$route.params.comName) {
      this.comName =
        this.$route.params.comName === "ProductList"
          ? "ProductList"
          : "CouponList";
    }
  }
}
</script>

<style lang="scss" scoped></style>
